<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
  <script src="static/echarts.min.js"></script>
  <script src="static/plug-in.min.js"></script>
  <script src="static/jquery.liMarquee.js"></script>
  <link rel="stylesheet" href="static/index.css" media="all"/>
</head>
<body>
  <div class="title-name">设备运行状态一览图</div>
  <div class="title-icon"><span>正常设备</span><span>计划性维修设备</span><span>非计划性维修设备</span></div>
  <div id="echart" class="echart"></div>
  <div class="data">
    <div>
      <span id="monthNum">暂无</span>
    </div>
    <div>
      <span id="waitNum">暂无</span>
      <span id="rate">暂无</span>
    </div>
    <div style="height: 80%;">
      <div id="weekJob" class="item title">
        <span>设备编号</span>
        <span>保养任务</span>
        <span>保养计划时间</span>
      </div>
      <div class="scrollDiv str_wrap str_vertical"></div>
<!--      <div class="item">
        <span>设备名称</span>
        <span>正常</span>
        <span>2021/03/21</span>
      </div>-->
    </div>
  </div>
</body>
<style>
  /*Plugin CSS*/
  .str_wrap {
    overflow:hidden;
    height:56%;
    width:100%;
    position:relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    white-space:nowrap;
  }

  .str_move {
    white-space:nowrap;
    position:absolute;
    top:0;
    left:0;
    cursor:move;
  }
  .str_move_clone {
    display:inline-block;
    vertical-align:top;
    position:absolute;
    left:100%;
    top:0;
  }
  .str_vertical .str_move_clone {
    left:0;
    top:100%;
  }
  .str_down .str_move_clone {
    left:0;
    bottom:100%;
  }
  .title-name{
    position: absolute;
    top: 97px;
    left: 26%;
    font-size: 34px;
    color: black;
    z-index: 10000;
  }
</style>
<script>
  const ACCESS_TOKEN = 'Access-Token'
  const VUE_STORE_BASE = 'pro__'

  var tooltip_message = ''
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart'))

var img = new Image()
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')

canvas.width = myChart.getWidth() * window.devicePixelRatio
canvas.height = myChart.getHeight() * window.devicePixelRatio

var fullImage = new Image()
img.onload = function () {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
  fullImage.src = canvas.toDataURL()
  setTimeout(function () {
    myChart.resize()
  }, 100)
}
img.src = ''

var option = {
  // 背景
  backgroundColor: {
    repeat: 'no-repeat',
    image: fullImage
  },
  // 地图
  geo: {
    map: 'world',
    silent: true,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    itemStyle: {
      normal: {
        opacity: 0.8,
        borderWidth: 0,
        color: '#a53d13'
      }
    }
  },
  title: {
    text: '',
  },
  // 开启工具栏
  tooltip: {
    "trigger": "item",
    "confine": true,
    "formatter": (params, ticket, callback)=>{
      // params.data   [20, 204, "L-012"]，水平位置，垂直位置，设备编号
      let sbNo = params.data[2];
      getSbDetail(sbNo);
      return tooltip_message;
    }
  },
  series: [{
    name: '正常点',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
    ],
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      normal: {
        formatter: '{@value}',
        position: 'left',
        show: false
      }
    },
    itemStyle: {
      normal: {
        color: '#174FBF',
        shadowBlur: 200,
        shadowColor: '#174FBF'
      }
    },
    zlevel: 1
  }, {
    name: '正常点编号',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'pin', // 气泡
    symbolSize: 50,
    label: {
      normal: {
        show: true,
        formatter: '{@value}',
        textStyle: {
          color: '#000',
          fontSize: 11
        }
      }
    },
    itemStyle: {
      normal: {
        color: '#174FBF'
      }
    },
    zlevel: 6,
    data: [
    ]
  }, {
    name: '红色非计划性报修异常点',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
    ],
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      normal: {
        formatter: '{@value}',
        position: 'left',
        show: false
      }
    },
    itemStyle: {
      normal: {
        color: 'red',
        shadowBlur: 200,
        shadowColor: 'red'
      }
    },
    zlevel: 1
  }, {
    name: '红色非计划性报修异常点编号',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'pin', // 气泡
    symbolSize: 50,
    label: {
      normal: {
        show: true,
        formatter: '{@value}',
        textStyle: {
          color: '#000',
          fontSize: 11
        }
      }
    },
    itemStyle: {
      normal: {
        color: 'red'
      }
    },
    zlevel: 6,
    data: [
    ]
  },{
    name: '黄色计划性报修异常点',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
    ],
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      normal: {
        formatter: '{@value}',
        position: 'left',
        show: false
      }
    },
    itemStyle: {
      normal: {
        color: 'yellow',
        shadowBlur: 200,
        shadowColor: 'yellow'
      }
    },
    zlevel: 1
  }, {
    name: '黄色计划性报修异常点编号',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'pin', // 气泡
    symbolSize: 50,
    label: {
      normal: {
        show: true,
        formatter: '{@value}',
        textStyle: {
          color: '#000',
          fontSize: 11
        }
      }
    },
    itemStyle: {
      normal: {
        color: 'yellow'
      }
    },
    zlevel: 6,
    data: [
    ]
  }]
}

  //初始化加载数据，定时器只能在定时到了才发生
  getData();
  getScreenJobData();

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 设备详情
function getSbDetail(sbNo){
  $.ajax({
    type: "get",
    url:  "/api/sb/infos/no/" + sbNo,
    headers: getHeader(),
    success: function (response) {
      tooltip_message = '<div>设备编号：' + response.data.no +
        '<br/>设备名称：' + response.data.name +
        '<br/>设备型号：' + response.data.model +
        '<br/>使用位置：' + response.data.cph +
        '<br/>设备维修员：' + response.data.repairUserName + '</div>';
    },
    error: function (xhr,textStatus,errorThrown) {
      error(xhr,textStatus,errorThrown);
    }
  });
}

  // 任务数据
  function getScreenJobData(){
    $.ajax({
      type: "get",
      url:  "/api/check/jobs/screen",
      headers: getHeader(),
      success: function (response) {
        $('#monthNum').text(response.data.finishNum + "/" + response.data.monthNum);
        $('#waitNum').text("待完成：" + response.data.waitNum);
        $('#rate').text("完成率：" + response.data.rate + "%");
        let weekJob = '';
        for(var i=0;i<response.data.weekList.length;i++){
           weekJob = weekJob + '  <div class=\'item\'>\n' +
                  '          <span>'+ response.data.weekList[i].sbNo + '</span>\n' +
                  '          <span>'+ response.data.weekList[i].requirement.substring(0, 12) + '</span>\n' +
                  '          <span>'+ response.data.weekList[i].startTime + '</span>\n' +
                  '        </div>'
        }

        $('.scrollDiv').empty().append(weekJob);

        $('.scrollDiv').liMarquee({
          direction: 'up',//身上滚动
          runshort: false,//内容不足时不滚动
          scrollamount: 20//速度
        });
      },
      error: function (xhr,textStatus,errorThrown) {
        error(xhr,textStatus,errorThrown);
      }
    });
  }

// setInterval(mockData(), 10000);
  setInterval(function(){ getData() }, 60000);
  // setInterval(function(){ getScreenJobData() }, 60000);

function mockData() {

  var data = [
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常']
  ];

  var data2 = [
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '不知道', '不知道'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '不知道', '不知道'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '不知道', '不知道'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '不知道', '不知道'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '不知道', '不知道'],
    [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '不知道', '不知道']
  ];
  option.series[0].data=data;// 正常数据
  option.series[1].data=data2;// 异常的红色内容名称
  option.series[2].data=data2;// 异常黄点
  console.log(data);
  console.log(data2);
  myChart.setOption(option, true)
}

function getData(){
  $.ajax({
    type: "get",
    url:  "/api/sb/infos/screen",
    headers: getHeader(),
    success: function (response) {
      const data= response.data;
      const normalSbInfoList = [];
      const repairSbInfoListRed = [];
      const repairSbInfoListYellow = [];
      if(data.normalSbInfoList !=null){
        for(var i=0;i<data.normalSbInfoList.length;i++){
          normalSbInfoList.push([data.normalSbInfoList[i].zjm, data.normalSbInfoList[i].jbdh,
            data.normalSbInfoList[i].no])
        }
      }
      if(data.repairSbInfoListRed !=null) {
        for (var i = 0; i < data.repairSbInfoListRed.length; i++) {
          repairSbInfoListRed.push([data.repairSbInfoListRed[i].zjm, data.repairSbInfoListRed[i].jbdh,
            data.repairSbInfoListRed[i].no])
        }
      }
      if(data.repairSbInfoListYellow !=null) {
        for (var i = 0; i < data.repairSbInfoListYellow.length; i++) {
          repairSbInfoListYellow.push([data.repairSbInfoListYellow[i].zjm, data.repairSbInfoListYellow[i].jbdh,
            data.repairSbInfoListYellow[i].no])
        }
      }
      option.series[0].data=normalSbInfoList;// 正常数据：
      option.series[1].data=normalSbInfoList;// 正常数据的编号
      option.series[2].data=repairSbInfoListRed;// 非计划性报修 红色编号
      option.series[3].data=repairSbInfoListRed;// 非计划性报修 红色
      option.series[4].data=repairSbInfoListYellow;// 计划性报修 黃色编号
      option.series[5].data=repairSbInfoListYellow;// 计划性报修 黃色
      myChart.setOption(option, true)
    },
    error: function (xhr,textStatus,errorThrown) {
      error(xhr,textStatus,errorThrown);
    }
  });
}

function getHeader(){
  return {
    Authorization: getToken(),
    // accept: "application/json; charset=utf-8",
    // "Access-Control-Allow-Origin": "http://localhost:5000",
    // "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept"
  }
}

function getToken(){
  const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE+ACCESS_TOKEN))
  return 'Bearer ' + storeTokenJson.value
}

  /*$(function(){
    console.log("滚动")
    $('.scrollDiv').liMarquee({
      direction: 'up',//身上滚动
      runshort: false,//内容不足时不滚动
      scrollamount: 20//速度
    });
  });*/

</script>

</html>
